$(function() {

	/*
	    Pinterest Grid Plugin
	    Copyright 2014 Mediademons
	    @author smm 16/04/2014
	
	    usage:
	
	     $(document).ready(function() {
	
	        $('#blog-landing').pinterest_grid({
	            no_columns: 4
	        });
	
	    });
	*/
	;
	(function($, window, document, undefined) {
		var pluginName = 'pinterest_grid',
			defaults = {
				padding_x: 10,
				padding_y: 10,
				no_columns: 3,
				margin_bottom: 50,
				single_column_breakpoint: 700
			},
			columns,
			$article,
			article_width;

		function Plugin(element, options) {
			this.element = element;
			this.options = $.extend({}, defaults, options);
			this._defaults = defaults;
			this._name = pluginName;
			this.init();
		}

		Plugin.prototype.init = function() {
			var self = this,
				resize_finish;

			$(window).resize(function() {
				clearTimeout(resize_finish);
				resize_finish = setTimeout(function() {
					self.make_layout_change(self);
				}, 11);
			});

			self.make_layout_change(self);

			setTimeout(function() {
				$(window).resize();
			}, 500);
		};

		Plugin.prototype.calculate = function(single_column_mode) {
			var self = this,
				tallest = 0,
				row = 0,
				$container = $(this.element),
				container_width = $container.width();
			$article = $(this.element).children();

			if (single_column_mode === true) {
				article_width = $container.width() - self.options.padding_x;
			} else {
				article_width = ($container.width() - self.options.padding_x * self.options
						.no_columns) / self
					.options.no_columns;
			}

			$article.each(function() {
				$(this).css('width', article_width);
			});

			columns = self.options.no_columns;

			$article.each(function(index) {
				var current_column,
					left_out = 0,
					top = 0,
					$this = $(this),
					prevAll = $this.prevAll(),
					tallest = 0;

				if (single_column_mode === false) {
					current_column = (index % columns);
				} else {
					current_column = 0;
				}

				for (var t = 0; t < columns; t++) {
					$this.removeClass('c' + t);
				}

				if (index % columns === 0) {
					row++;
				}

				$this.addClass('c' + current_column);
				$this.addClass('r' + row);

				prevAll.each(function(index) {
					if ($(this).hasClass('c' + current_column)) {
						top += $(this).outerHeight() + self.options.padding_y;
					}
				});

				if (single_column_mode === true) {
					left_out = 0;
				} else {
					left_out = (index % columns) * (article_width + self.options.padding_x);
				}

				$this.css({
					'left': left_out,
					'top': top
				});
			});

			this.tallest($container);
			$(window).resize();
		};

		Plugin.prototype.tallest = function(_container) {
			var column_heights = [],
				largest = 0;

			for (var z = 0; z < columns; z++) {
				var temp_height = 0;
				_container.find('.c' + z).each(function() {
					temp_height += $(this).outerHeight();
				});
				column_heights[z] = temp_height;
			}

			largest = Math.max.apply(Math, column_heights);
			_container.css('height', largest + (this.options.padding_y + this.options.margin_bottom));
		};

		Plugin.prototype.make_layout_change = function(_self) {
			if ($(window).width() < _self.options.single_column_breakpoint) {
				_self.calculate(true);
			} else {
				_self.calculate(false);
			}
		};

		$.fn[pluginName] = function(options) {
			return this.each(function() {
				if (!$.data(this, 'plugin_' + pluginName)) {
					$.data(this, 'plugin_' + pluginName,
						new Plugin(this, options));
				}
			});
		}

	})(jQuery, window, document);
	$(".nb2-nrl-rm").click(function() {
		var ind = $('.nb2-nrl-rm').index($(this))

		$(this).css({
			'border': '1px solid red',
			'color': 'red'
		}).siblings().css({
			'border': '1px solid gray',
			'color': '#8c8c8c'
		});
		$(".nb2Jt").eq(ind).css('transform', 'rotate(180deg)').siblings().css('transform',
			'rotate(0deg)');
		// $(this).children(".nb2Jt").css('transform', 'rotate(180deg)').siblings().css(
		// 	'transform', 'rotate(0deg)');
	});
	var stp_p = store.person;
	var str = {};
	stp_p.forEach(function(v, i) {
		// console.log(v);
		str += `
		<article class="white-panel">
			<img src="${v.url}">
			<div class="llzmd">
				<div class="llzmd-x"><img src="${v.url1}" alt=""></div>
				<p class="llzmd-text">${v.shop}</p>
				<p>主营品牌:<span>${v.shoping}</span> </p>
				<div class="ll-sjdj">商家等级:<img src="../imgs/03-dengji.png" alt=""></div>
			</div>
			<div class="gw-love"><i class="bi bi-heart"></i></div>
		</article>
		`
		$('#gallery-wrapper').get(0).innerHTML = str;
	})

	$('.buttons1').click(function() {
		var inde = $('.buttons1').index($(this));
		// console.log(inde);
		if (inde == 0 || inde == 1) {
			$(this).addClass('buttons').siblings().removeClass('buttons');
			$('#gallery-wrapper').fadeIn(2000);
			$('#gallery-wrapper1').fadeOut(200);
		}
	})
	$('.buttons2').click(function() {
		var inde = $('.buttons2').index($(this));
		$(this).addClass('buttons').siblings().removeClass('buttons');
		$('#gallery-wrapper').fadeOut(200)
		$('#gallery-wrapper1').fadeIn(2000);

	})
	$('.gw-love').click(function() {
		$('.login-btn').fadeIn(1000);
		$('.max-nav').fadeIn(1000);

	})
	$('.derror').click(function() {

		$(this).parents('.login-btn').hide();
		$('.max-nav').hide();

	})
})
